<template>
    <div class="footer">
        <span class="item">首页</span>
    </div>
    <!-- <div v-for="(item, index) in matched" :key="index">{{ item.meta.title }} </div> -->
</template>

<script lang="ts" setup>

import { useRoute, RouteLocationMatched } from 'vue-router'
let route = useRoute();
let breadList = reactive([] as Array<RouteLocationMatched>,)


const matched = computed(() => {
    return route.matched.filter(item => item.meta && item.meta.title);
})
onMounted(() => {
    console.log('Route is available:', matched.value);
});
watch(() => route.path, (newPath) => {
    breadList = route.matched.filter(item => item.meta && item.meta.title);
    console.log('Route has changed:', newPath);
});

</script>

<style lang="scss" scoped>
.footer {
    height: 42px;
    background: #FFFFFF;
    padding: 0 16px;
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #E7EBF1;

    .item {
        background: #F6F8FA;
        border-radius: 0px 0px 4px 4px;
        border: 1px solid #E7EBF1;
        padding: 6px 14px;
    }
}
</style>